import React, { createContext, useContext } from "react";
// useContext仅仅是函数组件用于优化接受的写法
// Provider还是要正常的传递，Consumer不需要了

const context1 = createContext();
const context2 = createContext();

// const Child2 = () => {
//   return (
//     <div>
//       child2组件 -{" "}
//       <context1.Consumer>
//         {(value) => (
//           <span>
//             {value.name} -{" "}
//             <context2.Consumer>
//               {(val) => <span>{val.age}</span>}
//             </context2.Consumer>
//           </span>
//         )}
//       </context1.Consumer>
//     </div>
//   );
// };

const Child2 = () => {
  const { name } = useContext(context1);
  const { age } = useContext(context2);

  return (
    <div>
      child2组件 - <span>{name}</span> - <span>{age}</span>
    </div>
  );
};

const Child = () => {
  return (
    <context2.Provider value={{ age: 20 }}>
      <div>child组件</div>
      <Child2 />
    </context2.Provider>
  );
};

const App = () => {
  return (
    <context1.Provider value={{ name: "zhangsan" }}>
      <h2>useContext</h2>
      <Child />
    </context1.Provider>
  );
};

export default App;
